import React, { Component } from 'react'
import{
    DivContainer,
    InfoBoxContainer
}from './StyledChildView'
import {Link} from 'react-router-dom'
import Navigation from 'components/Navigation/Navigation'
import back from 'images/nav/whiteback@3x.png'

import m_pic1 from 'images/home/message/m_pic1@2x.png'
import m_pic2 from 'images/home/message/m_pic2@2x.png'
import m_pic3 from 'images/home/message/m_pic3@2x.png'
import m_pic4 from 'images/home/message/m_pic4@2x.png'
import m_pic5 from 'images/home/message/m_pic5@2x.png'





 
const infoArr = [
  
    {
        mImg:m_pic1,
        mName:"昵称",
        // mTime:'00:00',
        routePath : "/homeChildRouter/message",
        // mContent:"我太难了，我太难了我太难了我太难了",
        mTag:1

    },
    {
        mImg:m_pic2,
        mName:"帮助中心",
        // mTime:'00:00',
        routePath:"/homeChildRouter/helping",
        // mContent:"我太难了，我太难了我太难了我太难了",
        mTag:2

    },
    {
        mImg:m_pic3,
        mName:"等级增减提示",
        // mTime:'00:00',
        routePath:"/homeChildRouter/level",
        // mContent:"我太难了，我太难了我太难了我太难了",
        mTag:3

    },
    {
        mImg:m_pic4,
        mName:"系统公告",
        // mTime:'00:00',
        routePath : "/homeChildRouter/notice",
        // mContent:"我太难了，我太难了我太难了我太难了",
        mTag:4

    },
    {
        mImg:m_pic5,
        mName:"活动提示",
        // mTime:'00:00',
        routePath : "/homeChildRouter/activity",
        // mContent:"我太难了，我太难了我太难了我太难了",
        mTag:5

    }
    
]
export default class InfoBox extends Component {
    render() {
        return (
           <DivContainer>
                <Navigation
                title = "消息"
                leftMargin = '0 0 0 .15rem'
                leftWidth = '25%'
                leftHeight = '.44rem'
                titleSize = '.17rem'
                leftImg = {back}
                leftImgWidth = '.2rem'
                clickLeft = {()=>this.onClickLeft("left")}
                ></Navigation>
                <div>
                   <ul>
                    {  
                        infoArr.map((value,index)=>(
                            // console.log(value)
                        <InfoBoxContainer key={value.mTag}>
                            <div className="mLeft">
                                <img src={value.mImg} alt=""/>
                                <Link to={value.routePath} className="mContent">
                                        <p>{value.mName}</p>
                                        <p className="pContent">{value.mContent}</p>
                                </Link>
                            </div>
                            <div className="mRight">{value.mTime}</div>
                        </InfoBoxContainer>
                        
                        ))
                    }
                </ul> 
                </div>
                
           </DivContainer>
        )
    }
    onClickLeft(tag){
        this.props.history.go(-1)
    
      }
}
